<!--
  评估鉴定
-->

<template>
  <div class="app-waper">
    <div id="app">
      <div id="top">
        <i class="el-icon-search"></i><span>筛选查询</span>

        <!--录入人-->
        <span>评估时间</span>

        <!--录入时间-->
        <span>评估人</span>

        <!--根据输入字段模糊查询-->
        <div class="like">
          <span>模糊条件</span>
          <el-input class="likequery" placeholder="请输入品牌名称或名称缩写查询" v-model="input" clearable></el-input>
          <el-button type="primary" @click="queryByLike()">查询</el-button>
        </div>
      </div>
      <div id="table">
        <!--操作 : 新增,修改,删除-->
        <div id="right-waper">
          <i class="el-icon-menu" style="color: #409EFF"></i><span>数据列表</span>
          <div id="right">

            <!--<el-button type="primary" @click="update=true">修改</el-button>-->
            <el-button type="primary" @click="deleteBrand">删除</el-button>
          </div>
        </div>
        <!--表格-->
        <template>
          <el-table :data="tableData" stripe style="width: 100%" @selection-change="checkIndex">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column prop="brandId" label="编号" ></el-table-column>
            <el-table-column prop="brandId" label="来源门店" ></el-table-column>
            <el-table-column prop="brandName" label="商品分类"></el-table-column>
            <el-table-column prop="brandFirst" label="商品价格"></el-table-column>
            <el-table-column prop="brandBigClass" label="所属品牌"></el-table-column>
            <el-table-column prop="brandDes" label="评估人"></el-table-column>
            <el-table-column prop="brandDes" label="评估时间"></el-table-column>
            <el-table-column prop="brandDes" label="评估类别"></el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              >
              <template slot-scope="scope">
<!--                <el-button @click="handleClick(scope.row)" type="text" size="small">评估鉴定</el-button>-->
                <el-button @click="dialogFormVisible = true" type="text" size="small">评估鉴定</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!--分页-->
        <el-pagination background layout="prev, pager, next" page-size="5" :total=total
                       @prev-click="lastPage()" @next-click="nextPage()" @current-change="currentChange">
        </el-pagination>

        <!--1. 评估鉴定模态框-->
        <el-dialog title="评估鉴定" :visible.sync="dialogFormVisible" width="40%">
          <!--选项卡-->
          <el-tabs type="border-card">
            <el-tab-pane label="商品信息">商品信息</el-tab-pane>
            <el-tab-pane label="商品鉴定">商品鉴定</el-tab-pane>
            <el-tab-pane label="历史鉴定信息">历史鉴定信息</el-tab-pane>
            <el-tab-pane label="鉴定人信息">鉴定人信息</el-tab-pane>
          </el-tabs>
        </el-dialog>

        <!--2. 文件上传-->
        <p>文件上传</p>
        <el-upload
          action="http://localhost:8080/file/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :with-credentials="isCredentials"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>



      </div>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name:"index",

    /*======================================================相当于data*/
    data(){
      return{
        /*新增品牌*/
        brand: {
          brandName:"",
          brandFirst:"",
          brandDes:"",
          brandBigClass:0,
          classNum:null,
          delivery: false,
          type: [],
        },
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '100px',
        value: '',
        /*输入字段模糊查询*/
        input: '',
        /*1. 后端发过来的查询到的表格的所有的数据(表格数据)*/
        tableData:[],
        /*2. 上一页下一页的index*/
        pageIndex:1,
        /*分页:后端传递的所有数据记录*/
        total:null,
        /*更新*/

        /*数组保存触发复选框后的一些数据*/
        checkArrayObj:[],

        /*数组保存复选框后的对象的id*/

        /*修改*/

        dialogImageUrl: '',
        dialogVisible: false,
        isCredentials:true
      }
    },
    /*===========================================================方法区*/
    methods:{
      //评估鉴定触发事件
      jianding(){
        alert("鉴定!!")
      },
      //评估鉴定触发事件
      handleClick(row) {
        //console.log(row);

      },


      //下一页
      nextPage: function () {
        let $this = this;
        let $nextPageIndex = ++$this.pageIndex;
        request.post("http://192.168.40.7:8080/brand/findAll",{
          "pageIndex":$nextPageIndex
        }).then(function (data) {
          $this.tableData = data.data.list;
        })
      },
      //上一页
      lastPage: function () {
        let $this = this;
        let $prevPageIndex = --$this.pageIndex;
        request.post("http://192.168.40.7:8080/brand/findAll",{
          "pageIndex":$prevPageIndex
        }).then(function (data) {
          $this.tableData = data.data.list;
        })
      },
      //当前页
      currentChange:function(PageIndex){
        let $this = this;
        request.post("http://192.168.40.7:8080/brand/findAll",{
          "pageIndex":PageIndex
        }).then(function (data) {
          $this.tableData = data.data.list;
        })
      },
      //模糊查询
      queryByLike: function () {
        let $this = this;
        request.post("http://192.168.40.7:8080/brand/queryByLike",{
          "inputString":$this.input,
        })
          .then(function (data) {
            //$this.tableData = data.data;
            $this.tableData = data.data.list
          })
      },


      //文件上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },

    /*==========================================生命周期*/
    mounted(){
      let $this=this;
      request.post("http://192.168.40.7:8080/brand/findAll",{
        pageIndex:$this.pageIndex
      }).then(function (data) { //成功
        //将数据填充到表格中
        $this.tableData = data.data.list;
        //将数据的条数记录到total中
        $this.total=data.data.total
      })
    }

  }
</script>











<style scoped>
  .el-icon-menu{
    font-size: 40px;
  }
  .like{
    display: inline-block;
    position: relative;
    left: 38%;
  }
  .app-waper{
    /*background-color: rgba(242, 242, 242, 1);;*/
  }
  #app{
    /*width: 80%;*/
    /*height: 600px;*/
    /*background-color: skyblue;*/
    /*margin-left: 20%;*/
    margin: 2%;
  }
  #top{
    margin-bottom: 5px;
    height: 40px;
    /*background-color: rgba(204, 204, 204, 1);;*/
  }
  #top>span{
    position: relative;
    left: 20px;
  }
  #top>.el-icon-search{
    margin-left: 10px;
    font-weight: bold;
  }
  /*!*下拉菜单样式*!*/
  /*.el-dropdown-link {*/
  /*  cursor: pointer;*/
  /*  !*color: #409EFF;*!*/
  /*  width: 60px!important;*/
  /*  height: 30px!important;*/
  /*}*/
  /*模糊查询*/
  .likequery{
    display: inline-block;
    width: 400px;
  }
  #right-waper{
    /*background-color: rgba(204, 204, 204, 1);*/
    width: 100%;
    height: 42px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
  }
  #right-waper>span{
    position: relative;
    top: -9px;
    left: 20px;
  }
  #right{
    float: right;
    margin-right: 20px;
  }
  #right .el-button{
    /*background-color: rgba(102, 102, 102, 1);*/
    width: 84px;
    height: 40px;
  }
  .like .el-button{
    /*background-color: rgba(102, 102, 102, 1);*/
    width: 84px;
    height: 40px;
  }
  .app-waper{
    padding:8px;
    overflow: hidden;
  }
</style>











